<!DOCTYPE html>
<html lang="en">
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	  xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"></head>
<title>三3三-社区审批申请</title>
<style>
	body {
		margin: 0;
		padding: 0;
		background-color: #F7F7F7;
		font-family: '汉仪大隶书繁';
	}

	form {
		max-width: 640px;
		width: 100%;
		margin: 24px auto;
		font-size: 28px;
	}

	label {
		display: block;
		margin: 10px 10px 15px;
		font-size: 24px;
	}

	input {
		display: block;
		width: 100%;
		height: 40px;
		font-size: 22px;
		margin-top: 10px;
		padding: 6px 10px;
		color: #333;
		border: 1px solid #CCC;
		box-sizing: border-box;
	}

	meter, progress {
		display: block;
		width: 100%;
		margin-top: 10px;
	}

	.btn {
		margin-top: 30px;
	}

	.btn input {
		color: #FFF;
		background-color: green;
		border: 0 none;
		outline: none;
		cursor: pointer;
	}

</style>
</head>
<body>
<div style="position: fixed;left: 1050px">
	<button onclick="refuse()" type="button" class="btn btn-primary">驳回</button>
	<button onclick="agree()" type="button" class="btn btn-primary">同意</button>
	<button onclick="flowDraw()" type="button" class="btn btn-primary">流程图</button>
	<button onclick="flowHistory()" type="button" class="btn btn-primary">审批历史</button>
</div>

<form th:action="@{/approval/approval}" method="post" id="formId">
	<fieldset>
		<legend>个人资料</legend>
		<input type="hidden" id="flowId" th:value="${entity.id}">
		<label for="">
			姓名: <input type="text" name="name" required autofocus placeholder="请输入姓名">
		</label>
		<label for="">
			手机号码: <input type="tel" name="iphone" pattern="1\d{10}" placeholder="请输入手机号码">
		</label>
		<label for="">
			邮箱地址: <input type="email" name="email" placeholder="请输入邮箱地址">
		</label>
		<label for="">
			所属职业: <input type="text" name="job" list="course" placeholder="前端与移动开发">
			<datalist id="course">
				<option value="前端与移动开发"></option>
				<option value="PHP"></option>
				<option value="JAVA"></option>
				<option value="Android"></option>
				<option value="IOS"></option>
				<option value="UI设计"></option>
				<option value="C++"></option>
			</datalist>
		</label>
		<label for="">
			面试成绩: <input type="number" name="score" max="100" id="score" step="10" value="80">
		</label>
		<label for="">
			基础水平: <meter min="0" max="100"  low="60" high="80" value="80" id="level"></meter>
		</label>
		<label for="">
			入学日期: <input type="date" name="startTime" value="">
		</label>
		<label for="">
			毕业时间: <input type="date" name="endTime" value="">
		</label>
<!--		<label for="">-->
<!--			课程进度: <progress min="0" max="100" value="10"></progress>-->
<!--		</label>-->
		<input type="hidden" name="result" id="agree" value="0" >
		<label for="" class="btn">
			<input type="submit" value="保存">
		</label>
	</fieldset>
</form>
<div id="window" class="window_css">
	<a style="position: fixed;right: 250px" href="javascript:void(0)" onclick="hideWindow()">
		关闭窗口
	</a>
	<div id="window2">

	</div>
</div>
</body>

<script src="../../assets/js/jquery.min.js"></script>
<script>
	var score = document.getElementById('score');
	var level = document.getElementById('level');

	score.oninput = function () {
		level.value = this.value;
	}

	function refuse() {
		console.log($('#formId').serialize())
		$.ajax({
			type: 'POST',
			url:"/approval/approval",
			data:$('#formId').serialize(),
			success: function (data) {

			}}
		)
	}

	function agree() {
		$("#agree").val(1);
		console.log($('#formId').serialize())
		$.ajax({
			type: 'POST',
			url:"/approval/approval",
			data:$('#formId').serialize(),
			success: function (data) {

			}}
		)
	}

	function flowDraw() {
		var flowId = $("#flowId").val();
		$.ajax({
			type: 'GET',
			url:"/approval/findFlowImage?id="+flowId,
			// data: {id:flowId},
			async: false,
			success:function (data) {
				var img = document.createElement('img');//创建一个标签
				img.setAttribute('src',"/approval/findFlowImage?id=" + id);//给标签定义src链接
				document.getElementById('window2').appendChild(img);//放到指定的id里
			}
		})
	}

	/*当点击调用此方法后,将悬浮窗口显示出来,背景变暗*/
	function displayWindow() {
		/*悬浮窗口的显示,需要将display变成block*/
		document.getElementById("window").style.display = "block";
		/*将背景变暗*/
		document.getElementById("shadow").style.display = "block";
	}

	/*当点击调用此方法,将悬浮窗口和背景全部隐藏*/
	function hideWindow() {
		$("#window2").empty();
		document.getElementById("window").style.display = "none";
		document.getElementById("shadow").style.display = "none";
	}

</script>
</html>